<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
import {
  Scene,
  LineLayer,
  PolygonLayer,
  PointLayer,
  Popup,
  Control
} from "@antv/l7";
import { Mapbox } from "@antv/l7-maps";
export default {
  props: {
    mapFrom: {},
    mapObj: {},
    mapPointObj: {},
    liaoningmapObj: {},
    mapLiaoningPointObj: {}
  },
  data() {
    return {
      flyLine: "",
      dotPoint: "",
      pointText: "",
      liaoningflyLine: "",
      liaoningdotPoint: "",
      liaoningpointText: "",
      layer: "",
	  layerDown: "",
      layer2: "",
      liaoninglayer: "",
      liaoninglayer2: "",
      scene: "",
      mode: 0,
      totalhour: 0,
      legend: "",
      info: ""
    };
  },
  mounted() {
    setTimeout(() => {
      this.setData();
    }, 100);
    setTimeout(() => {
      this.transformFun();
    }, 10000);
  },
  methods: {
    setData() {
       const colors2 = ['#342ff7','#5652f7','#706df5','#8f8df4','#aba9f5','#b5ccfb'].reverse();
     /* const colors2 = [
        //"rgba(9,20,231,1)",
		"rgba(9,20,231,1)",
        "rgba(12,72,164,1)",
        "rgba(10,84,196,1)",
        "rgba(35,111,227,1)",
        "rgba(80,143,239,1)",
        "rgba(126,175,245,1)"
      ].reverse();*/

      let mapList = this.mapFrom.mapList;
      let liaoningmapList = this.mapFrom.liaoningmapList;

      let totalcount = 0;

      let totalcountcity = 0;

      this.scene = new Scene({
        id: "map",
        logoVisible: false,
        map: new Mapbox({
          style: "blank",
          center: [100.88, 37.239692],
          zoom: 3,
          doubleClickZoom: false,
          pitch: 45,
          dragPan: false,
          scrollZoom: false
        })
      });
      this.scene.on("loaded", () => {
        let arr = [];
        let liaoningarr = [];
        let obj = "";
        mapList.forEach(item => {
          arr.push({
            coord: [[item.lon, item.lat], [123.46, 41.67]]
          });
          item.ing = item.lon;
          item.type = "ok";
          totalcount = totalcount + item.regionHour;
        });

        liaoningmapList.forEach(item => {
          liaoningarr.push({
            coord: [[item.lon, item.lat], [123.46, 41.67]]
          });
          item.ing = item.lon;
          item.type = "ok";
          totalcountcity = totalcountcity + item.cityHour;
        });

        let arr2 = mapList;
        let liaoningarr2 = liaoningmapList;
        this.flyLine = new LineLayer({ zIndex: 16, blend: "normal" })
          .source(arr, {
            parser: {
              type: "json",
              coordinates: "coord"
            }
          })
          .color("#ff6b34")
          .shape("arc3d")
          .size(4)
          .animate({
            interval: 0.5,
            trailLength: 1,
            duration: 5
          })
          .style({
            opacity: 1,
	
          });
        this.dotPoint = new PointLayer({
          zIndex: 200
        })
          .source(arr2, {
            parser: {
              type: "json",
              x: "lon",
              y: "lat"
            }
          })
          .shape("circle")
          .color("#ffed11")
          .animate(true)
          // .size(40)
          .size("regionHour", regionHour => {
            // 回调函数
            if (regionHour / totalcount > 0.5) {
              return 40;
            } else if (
              regionHour / totalcount <= 0.5 &&
              regionHour / totalcount > 0.02
            ) {
              return 30;
            } else {
              return 20;
            }
          })
          .style({
            opacity: 1.0,
			//heightfixed: true,
			//raisingHeight: 100000,
			//sourceColor: '#333',
			//targetColor: '#fff'
          });
        this.pointText = new PointLayer({
          zIndex: 15
        })
          .source(this.mapPointObj, {
            parser: {
              type: "json",
              coordinates: "center"
            }
          })
          .shape("name", "text")
          .size(12)
          .color("#f2f2f2")
          .style({
            stroke: "#cccccc", // 描边颜色
            strokeWidth: 0, // 描边宽度
            strokeOpacity: 1.0,
            textAllowOverlap: true,
            fontWeight: "normal"
          });

//中国地图
        this.layer = new PolygonLayer({
          zIndex: 8
        })
          .source(this.mapObj)
          .color("regionHour", d => {
            return d > 100000
              ? colors2[5]
              : d > 10000
                ? colors2[4]
                : d > 1000
                  ? colors2[3]
                  : d > 100 ? colors2[2] : d > 10 ? colors2[1] : colors2[0];
          })
		  //.color(colors2[5])
          //.shape("fill")
		  .shape('extrude')

		  .size(150000)
          .active({
            color: "#5869ec"
          })
          .style({
            opacity: 1,
			//heightfixed: true,
			pickLight: true,
			raisingHeight: 20000,
			sourceColor: '#d9dbfa',
			targetColor: '#b4b9fb'
          });
		  
		  
		  
        this.layer.on("mousemove", e => {
          this.info = this.scene.getControlByName("infoControl");
          this.info.update(e.feature);
        });
        this.layer.on("mouseout", e => {
          this.info.update("");
        });
		
		
	

 this.layer_Down = new PolygonLayer({
          zIndex: 6
        })
          .source(this.mapObj)
          .color("regionHour", d => {
            return d > 100000
              ? colors2[5]
              : d > 10000
                ? colors2[4]
                : d > 1000
                  ? colors2[3]
                  : d > 100 ? colors2[2] : d > 10 ? colors2[1] : colors2[0];
          })
          .shape("fill")
		  //.shape('extrude')
		
		  .size(150000)
          .active({
            color: "#43b9f5"
          })
          .style({
            opacity: 1,
			raisingHeight: 20000,
			sourceColor: '#d9dbfa',
			targetColor: '#b4b9fb'
          });
		  
		  
		


	
		
		
		

//中国地图分界线
        this.layer2 = new LineLayer({
          zIndex: 9
        })
          .source(this.mapObj)
		  .active(true)
          .color("#fff")
		  .shape('line')
          .size(0)
          .style({
            opacity: 1,
			raisingHeight: 20000
          });


//飞行路线

        this.liaoningflyLine = new LineLayer({ zIndex: 16, blend: "normal" })
          .source(liaoningarr, {
            parser: {
              type: "json",
              coordinates: "coord"
            }
          })
          .color("#ff6b34")
          .shape("arc3d")
          .size(4)
          //.active(true)
          .animate({
            interval: 0.5,
            trailLength: 1,
            duration: 5
          })
          .style({
            opacity: 1
          });
        this.liaoningdotPoint = new PointLayer({
          zIndex: 200
        })
          .source(liaoningarr2, {
            parser: {
              type: "json",
              x: "lon",
              y: "lat"
            }
          })
          .shape("circle")
          .color("#ffed11")
          .animate(true)
          .size("cityHour", cityHour => {
            // 回调函数
            if (cityHour / totalcountcity > 0.5) {
              return 40;
            } else if (
              cityHour / totalcountcity <= 0.5 &&
              cityHour / totalcountcity > 0.02
            ) {
              return 30;
            } else {
              return 20;
            }
          })
          .style({
            opacity: 1.0,
          });
        this.liaoningpointText = new PointLayer({
          zIndex: 9
        })
          .source(this.mapLiaoningPointObj, {
            parser: {
              type: "json",
              coordinates: "center"
            }
          })
          .shape("name", "text")
          .size(12)
          .color("#ffffff")
          .style({
           stroke: "#cccccc", // 描边颜色
            strokeWidth: 0, // 描边宽度
            strokeOpacity: 1.0,
            textAllowOverlap: true,
            fontWeight: "normal"
          });


//辽宁地图
        this.liaoninglayer = new PolygonLayer({
          zIndex: 8
        })
          .source(this.liaoningmapObj)
          .color("cityHour", d => {
            return d > 100000
              ? colors2[5]
              : d > 10000
                ? colors2[4]
                : d > 1000
                  ? colors2[3]
                  : d > 100 ? colors2[2] : d > 10 ? colors2[1] : colors2[0];
          })
          //.shape("fill")
		  .shape('extrude')
		  .size(20000)
          .active({
            color: "#5869ec"
          })
          .style({
            opacity: 1,
			raisingHeight: 20000,
			pickLight: true,
			sourceColor: '#d9dbfa',
			targetColor: '#b4b9fb'
          });
        this.liaoninglayer.on("mousemove", e => {
          this.info = this.scene.getControlByName("infoControl");
          this.info.update(e.feature);
        });
        this.liaoninglayer.on("mouseout", e => {
          this.info.update("");
        });

//辽宁分界线
        this.liaoninglayer2 = new LineLayer({
          zIndex: 9
        })
          .source(this.liaoningmapObj)
          .color("#0265B4")
          .size(0)
          .style({
            opacity: 1,
			raisingHeight: 20000
          });

        this.legend = new Control({
          position: "bottomleft"
        });
        this.legend.onAdd = function() {
          var el = document.createElement("div");
          el.className = "infolegend legend";
          var grades = [0, 10, 100, 1000, 10000, 100000];
          el.innerHTML +=
            "<div style='color:#fff;font-size:.14rem;'>近24小时访问量</div>";
          for (var i = 0; i < grades.length; i++) {
            el.innerHTML +=
              '<div style="height:.14rem"><i style="background:' +
              colors2[i] +
              '"></i> ' +
              '<span style="color:#ffffff;font-size:.10rem">' +
              grades[i] +
              (grades[i + 1]
                ? "–" + grades[i + 1] + "</span>" + "</div>"
                : "+");
          }
          return el;
        };

        this.info = new Control({
          position: "topleft",
		   //offsets: [ 0, 0 ],
          name: "infoControl"
        });
        this.info.onAdd = function() {
          this._div = document.createElement("div");
          this.update();
          return this._div;
        };
        let that = this;
        this.info.update = function(feature) {
          if (!feature || feature === "null") {
            this._div.innerHTML = "";
            return;
          }
          this._div.innerHTML = `<div class=info_control>
                <h4 style="font-size:0.18rem;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:rgba(255,255,255,1);line-height:0.25rem;">${
                  feature.properties.name
                }</h4>
                <p style="font-size:0.16rem;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(255,255,255,1);line-height:0.2rem;margin-top:.21rem;">访问量:<p>
                <p style="font-size:0.26rem;font-family:DINAlternate-Bold,DINAlternate;font-weight:bold;color:rgba(255,145,32,1);line-height:0.3rem;margin-top:.06rem;"> ${that.formatQ(
                  feature.properties.regionHour
                ) ||
                  that.formatQ(feature.properties.cityHour) ||
                  0}<p>
                </div>`;
        };

        //this.scene.addLayer(this.flyLine);
        //this.scene.addLayer(this.dotPoint);
        this.scene.addLayer(this.pointText);
        //this.scene.addLayer(this.liaoningflyLine);
        //this.scene.addLayer(this.liaoningdotPoint);
        this.scene.addLayer(this.liaoningpointText);
        this.scene.addLayer(this.layer);
		//this.scene.addLayer(this.layer_Down);
        this.scene.addLayer(this.layer2);
        this.scene.addLayer(this.liaoninglayer);
        this.scene.addLayer(this.liaoninglayer2);
        this.scene.addControl(this.legend);
        this.scene.addControl(this.info);
        this.liaoninglayer.hide();
        this.liaoninglayer2.hide();
        //this.liaoningflyLine.hide();
       // this.liaoningdotPoint.hide();
        this.liaoningpointText.hide();
      });
    },
    transformFun() {
      setInterval(() => {
        this.info.update("");
        if (this.scene.getZoom() == 3) {
          //this.flyLine.hide();
          //this.dotPoint.hide();
          this.pointText.hide();
          this.layer.hide();
          this.layer2.hide();
          this.liaoninglayer.show();
          this.liaoninglayer2.show();
          //this.liaoningflyLine.show();
          //this.liaoningdotPoint.show();
          this.liaoningpointText.show();
          this.scene.setZoomAndCenter(5.8, [121.99, 40.99]);
        } else {
          //this.flyLine.show();
          //this.dotPoint.show();
          this.pointText.show();
          this.layer.show();
          this.layer2.show();
          this.liaoninglayer.hide();
          this.liaoninglayer2.hide();
          //this.liaoningflyLine.hide();
          this.liaoningdotPoint.hide();
          this.liaoningpointText.hide();
          this.scene.setZoomAndCenter(3, [100.88, 37.239692]);
        }
      }, 10000);
    },
    // 千分符
    formatQ(str) {
      if (!str) return;
      str = parseInt(str)
        .toString()
        .split(".");
      // console.log("第一次处理后的num",str);
      str[0] = str[0].replace(new RegExp("(\\d)(?=(\\d{3})+$)", "ig"), "$1,");
      // console.log("第一次处理后的num",str[0]);
      return str.join(".");
    }
  }
};
</script>
<style>
::-webkit-scrollbar {
  display: none;
}

html,
body {
  overflow: hidden;
  margin: 0;
}

#map {
  position: absolute;
  top: -60px;
  bottom: 0;
  width: 100%;
  background:url(../assets/images/circle_bg.png) no-repeat  center center;
  background-size:95%;
}

.infolegend {
  padding: 0.08rem 0.12rem;
  margin-bottom: 40px !important;
  background: rgba(14, 60, 91, 0.5);
  border-radius: 0.08rem;
  font-size: 0.11rem;
  font-family: PingFangSC-Regular, PingFang SC;
}

.infolegend h4 {
  margin: 0 0 5px;
  color: #777;
}

.legend {
  /* line-height: 18px; */
  color: #555;
}

.legend i {
  width: 0.14rem;
  height: 0.14rem;
  display: inline-block;
  opacity: 0.7;
}

.info_control {
  /* width: 1.18rem; */
  margin-top: 0.81rem;
  height: 1.23rem;
  background: rgba(14, 60, 91, 0.5);
  border-radius: 0.08rem;
  padding: 0.1rem 0.12rem;
}
.info_control h4 {
  margin: 0 0 5px;
  color: #111;
}
.info_control span {
  color: #111;
}

.mapinfo {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.info {
  width: 160px;
}
.info h4 {
  margin: 2px;
}
.info p {
  margin: 0;
}
.info span {
  margin: 2px;
}
</style>
